<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="二级集团：">
                        <Select v-model="form1.twoLevelOrgId">
                            <Option v-for="item in twoOrgList" :value="item.orgId" :key="item.orgId">{{ item.orgName}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
				<Col span="8">
                    <FormItem label="单位名称：" prop="order">
                        <company-select v-model="form1.companyName" style="width:100%" />
                        <!-- <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
                                      :orgTree="true"
                                      :setCurrentName="{label:form1.companyName,value:form1.companyId}"></cascader-dom> -->
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="事故类别：">
                        <Select v-model="form1.accTypeId"  >
                            <Option v-for="item in typeList" :value="item.codingCodeId" :key="item.codingCodeId">{{  item.codingName  }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="事故时间：">
                        <DatePicker class="query-form-el" v-model="form1.sartDateQuery" format="yyyy-MM-dd"
                                    type="daterange" :clearable="false"
                                    placement="bottom-start"
                                    @on-change="(date) => onSelectFieldQueryDateRange(date, 'sartDate')"
                                    style="width: 100%;"></DatePicker>
                    </FormItem>
                </Col>
				<Col span="8">
				    <FormItem label="年度：" prop="year" >
				        <DatePicker type="year" placeholder="请选择年度" v-model="form1.year1" clearable style="width: 100%;"
				                    @on-change="()=>{if(form1.year1 instanceof Date){form1.year = form1.year1.getFullYear().toString()}else {form1.year=null}}"></DatePicker>
				    </FormItem>
				</Col>
               <Col span="8">
                    <FormItem label="事故名称：">
                        <Input type="text" v-model="form1.sartName"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="downloadTemplate">企业报告调查模板</Button>
                    <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" :loading="buttonLoading" @click="batchDownload">批量下载</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" :loading="loading" size="small" class="table" no-data-text="没有查询到相关数据!"
            @on-sort-change="sortChange"
            highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal :transfer=false :mask-closable="false" v-model="model1" :width=850 :title="add?'企业调查报告新增':'企业调查报告修改'"
               @on-cancel="onCancel" :styles="{height:'600px'}">
            <div>
                <Form ref='InputData' :model="InputData" :rules="ruleCustom" label-position="top">
                    <div>
                        <Row>
                            <Col span='11'>
                                <FormItem label="事故名称：" prop="briefId">
                                    <Input v-model="InputData.sartName" placeholder="请选择事故名称" :readonly="true">
                                    <Button slot="append" @click="openForSelect" icon="ios-search"></Button>
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span='11' offset="1">
                                <FormItem label="事故类别：" prop="accTypeId">
                                    <Input v-model="InputData.accTypeName" placeholder="请选择事故名称" :readonly="true"/>
                                    <Input v-show="false" v-model="InputData.accTypeId" placeholder="请选择事故名称" :readonly="true"/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span='11' >
                                <FormItem label="事故时间：" prop="sartDate">
                                    <DatePicker v-model="InputData.sartDate" type="date" style="width: 100%;"
                                                placeholder="请输入" :readonly="true"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span='11' offset="1">
                                <FormItem label="报告完成时间：" prop="completionTime">
                                    <DatePicker v-model="InputData.completionTime" type="date" style="width: 100%;"
                                                placeholder="请输入" ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span='11'>
                                <FormItem label="企业负责人：" prop="chargeId">
                                    <Select v-model="InputData.chargeId" :label-in-value="true">
                                        <Option v-for="item in chargeList" :value="item.userId" :key="item.userId">
                                            {{ item.userName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span='11' offset="1">
                                <FormItem label="二级集团安全环保管理人员：" prop="secondaryGroupPersionId">
                                    <Select v-model="InputData.secondaryGroupPersionId" :label-in-value="true">
                                        <Option v-for="item in secondaryGroupPersionList" :value="item.userId" :key="item.userId">
                                            {{ item.userName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="InputData.sartName">
                            <Col span="23" class="query-form">
                                <p>事故伤亡人员信息</p>
                                <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350" :columns="columnsItem"
                                       :data="InputData.briefItems">
                                </Table>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="23">
                                <FormItem label="事故调查报告：" prop="uploadList">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="beforeUpload"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="uploadList.length>0" v-for="(item,index) in uploadList" :key='item'>
                                        <a @click="downloadFile(InputData.id,item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="remove1(item.id)" style="margin-left: 5px;margin-bottom: 3px" />
                                      <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                    </div>
                </Form>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submit('InputData')">确定</Button>
                <Button class='ivu-btn-cancel' @click="onCancel">取消</Button>
            </div>
        </Modal>

        <Modal :transfer=false v-model="model3" :width=850 :styles="{height:'600px'}" title="企业调查报告详情" @on-cancel="onCancel">
            <Form :model="InputData" label-position="top">
                <div>
                    <Row style="line-height: 42px;margin-left: 20px">
                        <Col span='11'>
                            <span>事故名称：{{InputData.sartName}}</span>
                        </Col>
                        <Col span='11' offset="1">
                            <span>事故类别：{{InputData.accTypeName}}</span>
                        </Col>

                    </Row>
                    <Row class="detail-background-clor" style="line-height: 42px;margin-left: 20px">
                        <Col span='11'>
                            <span>事故时间：{{ this.formatDate(new Date(InputData.sartDate),'yyyy-MM-dd')}}</span>
                        </Col>
                        <Col span='11' offset="1">
                            <span>报告完成时间：{{this.formatDate(new Date(InputData.completionTime),'yyyy-MM-dd')}}</span>
                        </Col>
                    </Row>
                    <Row style="line-height: 42px;margin-left: 20px">
                        <Col span='11'>
                            <span>企业负责人：{{ InputData.chargeName }}</span>
                        </Col>
                        <Col span='11' offset="1">
                            <span>二级集团安全环保管理人员：{{ InputData.secondaryGroupPersionName}}</span>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="23" class="query-form" style="margin-left: 20px">
                            <p>事故伤亡人员信息</p>
                            <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350" :columns="columnsItem"
                                   :data="InputData.briefItems">
                            </Table>
                        </Col>
                    </Row>
                    <Row  style="line-height: 42px;margin-left: 20px">
                        <Col span='11'>
                            <span>创建人：{{InputData.userName}}</span>
                        </Col>
                        <Col span='11' >
                            <span>创建时间：{{this.formatDate(new Date(InputData.createDate),'yyyy-MM-dd')}}</span>
                        </Col>
                    </Row>

                    <Row class="detail-background-clor" style="line-height: 42px;margin-left: 20px">
                        <Col span="23">
                            <FormItem label="事故调查报告：">
                                <div v-show="uploadList.length>0" v-for="(item,index) in uploadList" :key='item'>
                                    <a @click="downloadFile(InputData.id,item,index)">{{ item.fileName }}</a>
                                  <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                </div>
                            </FormItem>
                        </Col>
                    </Row>

                </div>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
            </div>
        </Modal>

        <Modal title="事故简报" :transfer=false footer-hide v-model="briefingList" :width=900>
            <FollowReportForSelect @getSelectData="getSelectData">
            </FollowReportForSelect>
        </Modal>
        <div v-show="downloading"
             style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
            <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
                     :options="options" :value="batchProcess"></svg-bar>
        </div>

        <Modal :transfer=false v-model="model4" :width=900>
            <Tabs>
                <TabPane label="历史记录">
                    <Table ref='table1' border :columns="columns2" no-data-text="没有查询到相关数据！" style="margin-top: 0"
                           :loading="loading2"
                           :data="history" width="100%" :height="450" highlight-row stripe size="small"></Table>
                </TabPane>
                <TabPane label="流程图">
                    <div style="height: 450px; overflow-y: auto; overflow-x: auto">
                        <img :src="imgUrl">
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <Button @click="model4=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';
import FollowReportForSelect from '../followReport/followReportForSelect.vue';
import cascaderDom from "../../../../components/cascader-dom.vue"
import svgBar from 'svg-progress-bar'
export default {
        name: "interestedPartiesBlack",
        components: {FollowReportForSelect, cascaderDom, svgBar},
        data() {
            return {
              injuryLevels: [],
              memberships: [],
              twoOrgList: [],
                secondaryGroupPersionList: [],
                chargeList: [],
                history: [],
                imgUrl:'',
                model4: false,
                loading2:false,
                columns2: [
                    {type: 'index', title: '序号', width: 80, align: 'center',},
                    {width: 180, title: '审批时间', key: 'endTime', align: 'center',},
                    {width: 185, title: '节点名称', key: 'name', align: 'center',},
                    {width: 120, title: '审批人', key: 'userName', align: 'center'},
                    {width: 100, title: '审批意见', key: 'route', align: 'center'},
                    {width: 200, title: '备注', key: 'opinions', align: 'center'},
                ],
              uploadListVisible: [],
              uploadListPercent: [],
              switchFlag: false,
              briefingList: false,
              uploadList: [],
              tableHeight: '',
              loading: false,
              form1: {
                admittanceOrg: '',
                contractorName: '',
                },
                sexList: [
                    {value: '0', text: '男'},
                    {value: '1', text: '女'}
                ],
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable: [],
                ruleCustom: {
                    chargeId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.chargeId == null || this.InputData.chargeId == '' || this.InputData.chargeId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    secondaryGroupPersionId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.secondaryGroupPersionId == null || this.InputData.secondaryGroupPersionId == '' || this.InputData.secondaryGroupPersionId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    briefId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.briefId == null || this.InputData.briefId  == '' || this.InputData.briefId  == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    position: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.position == null || this.InputData.position == '' || this.InputData.position == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    accTypeName: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.accTypeName == null || this.InputData.accTypeName == '' || this.InputData.accTypeName == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    injuryLevelName: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.injuryLevelName == null || this.InputData.injuryLevelName == '' || this.InputData.injuryLevelName == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    membershipName: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.membershipName == null || this.InputData.membershipName == '' || this.InputData.membershipName == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],

                    completionTime: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    uploadList:[{
                        validator: (rule, value, callback) => {
                            if (this.uploadList == 0) {
                                callback('请上传附件')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        title: '状态', align: 'center', key: 'status', width: 90,name:'1',
                        render: (h, params) => {
                            let color = 'green';
                            if (params.row.procinstState == undefined || params.row.procinstState == null || params.row.procinstState == 2) {
                                color = 'red';
                            }
                            if (params.row.procinstState == 1) {
                                color = 'blue';
                            }
                            return h('div', [h('span', {style: {color: color}},
                                params.row.procinstState == 1 ? '审批中' : params.row.procinstState == 2 ? '被退回' : params.row.procinstState == 3 ? '审批通过' : '未上报' || '--')]);
                        }
                    },
                    {title: '事故名称', align: 'center', key: 'sartName', minWidth: 120,},
                    {title: '事故单位', align: 'center', key: 'reportOrgName', minWidth: 150, tooltip: true},
                    {title: '事故类别', align: 'center', key: 'accTypeName', minWidth: 100,},
                    {title: '事故时间', align: 'center', key: 'sartDate',sortable: "custom", minWidth: 100,
                        render: (h, params) => {return h('div', [(this.formatDate(new Date(params.row.sartDate), 'yyyy-MM-dd'))]);}},
                    {title: '报告完成时间', align: 'center', key: 'completionTime',sortable: "custom", minWidth: 100,
                        render: (h, params) => {return h('div', [(this.formatDate(new Date(params.row.completionTime), 'yyyy-MM-dd'))]);}},
                    {title: '填报人', align: 'center', key: 'userName', minWidth: 100,},
                    {title: '上报时间', align: 'center', key: 'reportDate', sortable: "custom", minWidth: 100,
                        render:(h, params) => { if (!params.row.reportDate) return ""; return h('div', [(this.formatDate(new Date(params.row.reportDate), 'yyyy-MM-dd'))]);}},
                    {title: '企业负责人', align: 'center', key: 'chargeName', minWidth: 100,},
                    {title: '二级集团安全环保管理人员', align: 'center', key: 'secondaryGroupPersionName', minWidth: 100,},
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 280,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = JSON.parse(JSON.stringify(params.row));
                                            this.InputData.completionTime = this.formatDate(new Date( this.InputData.completionTime),'yyyy-MM-dd');
                                            this.InputData.createDate = this.formatDate(new Date( this.InputData.createDate),'yyyy-MM-dd');
                                            this.getFiles();
                                            this.model3 = true;
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId) || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined? '' : '#d0d0d0',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId) || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = JSON.parse(JSON.stringify(params.row));
                                            this.InputData.completionTime = this.formatDate(new Date( this.InputData.completionTime),'yyyy-MM-dd');
                                            this.InputData.createDate = this.formatDate(new Date( this.InputData.createDate),'yyyy-MM-dd');
                                            this.getFiles();
                                            this.model1 = true;
                                            this.add = false
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: !params.row.chargeId || !params.row.secondaryGroupPersionId || params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId) ||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? '' : '#d0d0d0',
                                        pointerEvents: !params.row.chargeId || !params.row.secondaryGroupPersionId || params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId)  ||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '<p>是否要提交？</p>',
                                                onOk: () => {
                                                    this.reportInfo(params.row);
                                                },
                                                onCancel: () => {
                                                }
                                            });
                                        }
                                    }
                                }, '上报'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId) || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? 'red' : '#d0d0d0',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == this.currentUser.userId || this.Common.userIdList.includes(this.currentUser.userId) || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row);
                                        }
                                    }
                                }, '删除'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('a', {
                                    props: {
                                        type: 'primary',
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstId == null ? '#d0d0d0' : '',
                                        pointerEvents: params.row.procinstId == null ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.imgUrl = Api.getFlowImg + '/' + params.row.procinstId
                                            this.showHistory(params.row);
                                        }
                                    }
                                }, '审批记录')
                            ]);
                        }
                    }
                ],
                add: false,
                InputData: {deptLeaderId: '', deptLeaderName: ''},

                buttonLoading: false,
                model2: false,
                model1: false,
                model3: false,
                membershipList: [],
                typeList: [],
                injuryLeveList: [],
                fileUrl: Api.interestedPartiesUserFile,
                columnsItem: [
                    // {title: '序号', width: 70, align: 'center', render: this.indexColumnsRender},
                    {title: '伤亡人员姓名', align: 'center', key: 'victim', minWidth: 100,},
                    {title: '性别', align: 'center', key: 'gender', minWidth: 80,render: (h, params) => {
                            return h('span', params.row.gender == '0' ? '男' : '女')}},
                    {title: '年龄', align: 'center', key: 'age', minWidth: 80,},
                    {title: '工种或岗位', align: 'center', key: 'position', minWidth: 120,},
                    {title: '伤害部位', align: 'center', key: 'injured', minWidth: 120,},
                    {title: '就业类型', align: 'center', key: 'membershipName', minWidth: 120,},
                    {title: '伤害程度', align: 'center', key: 'injuryLevelName', minWidth: 120,},
                    {title: '歇工天数', align: 'center', key: 'daysWork', minWidth: 100,},
                    {title: '直接经济损失(万元)', align: 'center', key: 'loseMoney', minWidth: 120,},
                ],
                batchProcess:0,
                downloading:false,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
            }
        },
    computed: {
        options: function() {
            return {
                radius: 50,//大小
                duration: 2,//变化时间长度
                circleWidth: 5,//圆环宽度
                pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
                circleLineCap: 'round',//进度条 形状  圆环 或者矩形
                text: function (value) {
                    return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
                },
                textColor: 'rgb(33, 150, 243)'
            }
        }
    },
        mounted() {
			this.form1.year1 = new Date()
			this.form1.year = new Date().getFullYear().toString()
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query()
            this.selectCodingSort();
            //企业负责人
            this.$http.get(Api.queryRoleUser + "/" + "cfb951f2448f44a6ba805e1d5313fa75", {params: {orgId: this.currentUser.companyId}}).then((res) => {
                this.chargeList = res.data.data;
            }).catch(e => {
                this.$Message.error("数据获取失败")
            });
            this.$http.get(Api.getTwoOrgInfo).then((res) => {
                this.twoOrgList = res.data.data;
            }).catch(e => {
                this.$Message.error("数据获取失败")
            });
            //二级集团
            this.$http.get(Api.queryRoleUser + "/" + "843197356dd443d099542d7ebe22b2be", {
                params: {
                    orgId: this.currentUser.twoLevelOrgId,
                    two: true
                }
            }).then((res) => {
                this.secondaryGroupPersionList = res.data.data;
            }).catch(e => {
                this.$Message.error("数据获取失败")
            });
            this.$Loading.config({
                color: '#5cb85c',
                failedColor: 'red',
                height: 5
            });
        },
        methods: {
            sortChange(data) {
                if (data.order === 'asc'||data.order ==='desc') {
                    let order = data.key
                    this.form1.dynamicSort = order +' '+ data.order
                    this.query()
                }
		    },
            setQueryOrgName(data) {
                this.$set(this.form1, "companyName", data);
            },
            batchDownload(){
                var _this = this;
                _this.downloading = true
                var url = Api.mongoBatchDownload;
                var ids = [];
                var fileNames = [];
                _this.dataTable.forEach(item=>{
                    ids.push(item.id)
                    fileNames.push(item.reportOrgName+'-'+_this.formatDate(new Date(item.sartDate), 'yyyy-MM-dd')+'-'+item.accTypeName+'-企业调查报告')
                })
                let formData = new FormData();
                formData.append("ids", ids); // 文件对象
                formData.append("fileNames", fileNames); // 文件对象
                _this.$http.post(url, formData, {
                    responseType: 'blob',      //告诉服务器我们需要的响应格式
                    progress:function(e){
                        _this.batchProcess = 100 * (e.loaded / e.total);
                        if(_this.batchProcess == 100){
                            _this.downloading = false;
                        }
                    }
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: 'application/zip'     //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = _this.formatDate(new Date(), 'yyyyMMddhhmmss') + ".zip";
                    aLink.click()
                    document.body.appendChild(aLink)
                }, function(res){
                    _this.$Loading.error();
                })
            },
            openForSelect() {
                this.briefingList = true;
            },
            switchQuery(flag) {
                this.switchFlag = flag;
                if (!this.switchFlag) {
                    this.tableHeight = this.tableHeight + 88;
                } else {
                    this.tableHeight = this.tableHeight - 88;
                }
            },
            downloadTemplate(){
                this.$http.get(Api.downloadAnnual, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "企业安全事故调查报告.doc" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            getSelectData(row) {
                this.InputData.accTypeName = row.accTypeName
                this.InputData.accTypeId = row.accTypeId
                this.InputData.sartName = row.sartName;
                this.InputData.briefId = row.briefId;
                this.InputData.sartDate = row.sartDate;
                this.InputData.victim = row.victim;
                this.InputData.damage = row.loseMoney;
                this.InputData.briefItems = row.briefItems;
                this.briefingList = false;
            },

            downloadFile(guideId, file,index) {
                let url = this.fileUrl + '/file/' + file.id;
              this.uploadListVisible[index] = true;
              var _this = this;
                this.$http.get(url, {
                    responseType: 'blob',      //告诉服务器我们需要的响应格式
                  progress:function(e){
                    _this.$set(_this.uploadListPercent,index, 100 * (e.loaded / e.total));
                  }
                }).then((res) => {
                    console.log(res)
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(id) {
                console.log(id)
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.getFiles()
                })
            },
            beforeUpload(file) {
                console.log(this.uploadList)
                let formData = new FormData();
                formData.append("files", file); // 文件对象
                let url = this.fileUrl + '/' + this.InputData.id + '/files/government'
                this.$http.post(url, formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.info("文件上传成功")
                        this.getFiles();
                    }
                })
                return false
            },
            getFiles() {
                let url = this.fileUrl + '/' + this.InputData.id + '/files/government'
                this.$http.get(url).then((res) => {
                    if (res.data.result == "success") {
                        this.uploadList = res.data.data
                      let index = 0;
                      this.uploadList.forEach(item=>{
                        this.uploadListPercent[index]=0;
                        this.uploadListVisible[index] = false;
                        index++;
                      })
                    }
                })
            },
            onCancel() {
                this.InputData = {}
                this.model1 = false
                this.model3 = false
                this.query();

            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true;
                        if (this.InputData.completionTime == null || this.InputData.completionTime == undefined || this.InputData.completionTime == ''){
                            this.InputData.completionTime = null;
                        } else{
                            this.InputData.completionTime = this.formatDate(new Date( this.InputData.completionTime),'yyyy-MM-dd');
                        }
                        if (this.add) {
                            let url = Api.saveAnnual
                            this.InputData.bsflag = '0'
                            this.InputData.createOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.InputData.createUserId = sessionStorage('userId').getObject('userId').userId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.query()
                                this.buttonLoading = false
                                this.model1 = false
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        } else {
                            let url = Api.updateAnnual;
                            this.InputData.updateUserId = sessionStorage('userId').getObject('userId').userId
                            this.InputData.updateOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.$http.put(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        }
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })

            },
            selectCodingSort() {
                this.$http.get(Api.queryCodeDetailBySortId + '/MEM-000001', {params: {}}).then((res) => {
                    this.membershipList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/ACC-000001', {params: {}}).then((res) => {
                    this.typeList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/1000001019', {params: {}}).then((res) => {
                    this.injuryLeveList = res.data.data;
                });
            },
            reportInfo(row) {
                this.loading = true;
                let data = {
                    key: "enterprise",
                    createUserId: this.currentUser.userId,
                    userName: this.currentUser.userName,
                    workId: row.id,
                    type: "qydcbg",
                    formKey: "enterpriseForApproval",
                    user1: row.chargeId,
                    user2: row.secondaryGroupPersionId,
                };
                this.$http.post(Api.submit, data).then(function (res) {
                    this.loading = false;
                    this.$Message.success({
                        content: '上报成功',
                        duration: 4
                    });
                    this.query();
                }, function (err) {
                    this.loading = false;
                    this.$Message.error({
                        content: '上报失败',
                        duration: 4
                    });
                });


            },
            deleteData(row) {
                let url = Api.deleteAnnual

                this.$http.delete(url+"/"+row.id).then((res) => {
                    this.$Message.success('成功');
                    this.query()
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            addInfo() {
                this.uploadList = [];
                this.add = true;
                this.InputData = {
                    id:this.get_uuid(),
                    rptType:'3',
                };
                this.model1 = true;
            },
            query() {
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    orgId: sessionStorage('userId').getObject('userId').companyId,
                    rptType: '3',
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                let url = Api.queryAnnual
                this.loading = true;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {};
                if (this.$refs.queryOrgCascader) {
                    this.$refs.queryOrgCascader.resetCurrentOrg();
                }
                this.pagedata.currentPage = 1;
                this.query();
            },
            onSelectFieldQueryDateRange(data, filed) {
                if (data[0] === "" || data[1] === "") {
                    this.form1[filed + 'From'] = null;
                    this.form1[filed + 'To'] = null;
                } else {
                    this.form1[filed + 'From'] = data[0] + ' 00:00:00';
                    this.form1[filed + 'To'] = data[1] + ' 23:59:59';
                }
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            showHistory(row) {
                this.model4 = true;
                this.loading2 = true;
                this.$http.get(Api.getHistory + '/' + row.procinstId, {params: {}}).then((res) => {
                    this.history = res.data;
                    this.loading2 = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
        },
        watch: {

        },
    }
</script>

<style scoped>
    @import '../../../../index.css';

</style>
